﻿@model List<Bk.Models.BlogInfo>
@*@model List<Bk.Model.BlogInfoModel>*@
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>我的博客</title>
    <style>
        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }

        /* 顶部导航栏 */
        .top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 30px;
            background: #fff;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .username {
            font-size: 18px;
            color: #333;
        }

        .management-btn {
            padding: 6px 15px;
            background: #1890ff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        /* 主体布局 */
        .main-layout {
            display: flex;
            max-width: 1000px;
            margin: 30px auto 0 auto;
            min-height: 600px;
        }

        .sidebar {
            width: 220px;
            background: white;
            border-radius: 8px;
            padding: 15px 0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            margin-right: 24px;
            flex-shrink: 0;
        }

        .content {
            flex: 1;
            background: white;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            min-width: 0;
        }

        .menu-item {
            padding: 15px 25px;
            cursor: pointer;
            color: #666;
            transition: all 0.3s;
            border-left: 3px solid transparent;
        }

            .menu-item:hover {
                background: #f5f5f5;
                color: #333;
            }

            .menu-item.active {
                color: #1890ff;
                background: #e6f7ff;
                border-left-color: #1890ff;
            }

        /* 博客操作栏 */
        .blog-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }

        .blog-tabs {
            display: flex;
            gap: 20px;
        }

        .blog-tab {
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
        }

            .blog-tab.active {
                background: #1890ff;
                color: white;
            }

            .blog-tab:hover {
                background: #40a9ff;
                color: white;
            }

        .blog-card {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.06);
            padding: 18px 22px 16px 22px;
            margin-bottom: 22px;
        }

        .blog-title {
            margin-bottom: 18px;
        }

            .blog-title a {
                font-size: 18px;
                color: #4190AD;
                font-weight: bold;
                text-decoration: none;
            }

                .blog-title a:hover {
                    text-decoration: underline;
                }

        .blog-meta {
            font-size: 13px;
            color: #888;
            margin: 8px 0 10px 0;
        }

        .blog-summary {
            color: #444;
            font-size: 15px;
            margin-bottom: 10px;
        }

        .blog-tags {
            margin-top: 4px;
        }

        .blog-tag {
            display: inline-block;
            background: #e6f7ff;
            color: #1890ff;
            border-radius: 3px;
            font-size: 12px;
            padding: 2px 8px;
            margin-right: 6px;
        }

        .read-more-btn {
            background: #1890ff;
            color: #fff;
            border: none;
            border-radius: 4px;
            padding: 4px 14px;
            font-size: 13px;
            cursor: pointer;
            margin-left: 10px;
            transition: background 0.2s;
        }
        .read-more-btn:hover {
            background: #1565c0;
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <div class="top-bar">
        <div class="user-info">
            <span class="username">@ViewBag.UserName</span>
        </div>
    </div>

    <!-- 主体容器 -->
    <div class="main-layout">
        <div class="sidebar">
            <div class="menu-item @(ViewBag.ActiveMenu == "Person" ? "active" : "")" onclick="location.href='@Url.Action("Person", "Home")'">基本信息</div>
            <div class="menu-item @(ViewBag.ActiveMenu == "Uploadface" ? "active" : "")" onclick="location.href='@Url.Action("Uploadface", "Home")'">上传头像</div>
            <div class="menu-item @(ViewBag.ActiveMenu == "Blog" ? "active" : "")" onclick="location.href='@Url.Action("Blog", "Home")'">我的博客</div>
            <div class="menu-item @(ViewBag.ActiveMenu == "ModifyData" ? "active" : "")" onclick="location.href='@Url.Action("ModifyData", "Home")'">修改资料</div>
            <div class="menu-item @(ViewBag.ActiveMenu == "ChangePassword" ? "active" : "")" onclick="location.href='@Url.Action("ChangePassword", "Home")'">修改密码</div>
            <div class="menu-item" onclick="location.href='@Url.Action("index", "Default")'">返回</div>
        </div>

        <div class="content">
            <div class="blog-header">
                <h2>我的博客</h2>
                <div class="blog-tabs">
                    @*<div class="blog-tab active" onclick="HomePage()">博客首页</div>*@
                    <div class="blog-tab active" onclick="Article()">写文章</div>
                </div>
            </div>

            <!-- 博客内容区（示例） -->
            <div class="blog-posts">
                @if (Model != null && Model.Count > 0)
                {
                    foreach (var blog in Model)
                    {
                        <div class="blog-card">
                            <div class="blog-title">
                                <a href="#">@blog.title</a>
                            </div>
                            <div class="blog-summary">
                                @if (@blog.Substance.Length > 200)
                                {
                                     @( @blog.Substance.Substring(0, 200)+"......")
                                }
                                else
                                {
                                    @blog.Substance
                                }
                            </div>
                            <div class="blog-meta">
                                <span>日期：@blog.PushDateStr</span>
                            </div>
                            <div class="blog-meta">
                                <span>分类：@blog.categoriesName</span>
                                <button class="read-more-btn" 
                                    data-title="@blog.title"
                                    data-content="@blog.Substance"
                                    data-date="@blog.PushDateStr"
                                    data-category="@blog.categoriesName"
                                    style="margin-left:16px;">继续阅读</button>
                            </div>
                            <div class="blog-tags">
                                @*@if (!string.IsNullOrEmpty(blog.Tags))
                                    {
                                        foreach (var tag in blog.Tags.Split(','))
                                        {
                                            <span class="blog-tag">@tag</span>
                                        }
                                    }*@
                            </div>
                        </div>
                    }
                }
                else
                {
                    <div style="color:#888;text-align:center;padding:40px 0;">暂无文章</div>
                }
            </div>
        </div>
    </div>

    <!-- 弹窗HTML放在页面底部 -->
    <div id="blogModal" style="display:none;position:fixed;left:0;top:0;width:100vw;height:100vh;background:rgba(0,0,0,0.35);z-index:9999;align-items:center;justify-content:center;">
        <div style="background:#fff;border-radius:8px;max-width:600px;width:90%;margin:auto;padding:32px 28px;position:relative;">
            <span id="closeModal" style="position:absolute;right:18px;top:10px;cursor:pointer;font-size:22px;">&times;</span>
            <h2 id="modalTitle" style="margin-bottom:12px;"></h2>
            <div style="color:#888;font-size:13px;margin-bottom:10px;">
                <span id="modalDate"></span>
                <span style="margin-left:16px;" id="modalCategory"></span>
            </div>
            <div id="modalContent" style="color:#444;font-size:15px;line-height:1.7;"></div>
        </div>
    </div>

    <!-- 弹窗JS放在页面最底部，保证按钮渲染后再绑定事件 -->
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('.read-more-btn').forEach(btn => {
            btn.onclick = function() {
                document.getElementById('modalTitle').innerText = this.dataset.title;
                document.getElementById('modalDate').innerText = '日期：' + this.dataset.date;
                document.getElementById('modalCategory').innerText = '分类：' + this.dataset.category;
                document.getElementById('modalContent').innerText = this.dataset.content;
                document.getElementById('blogModal').style.display = 'flex';
            }
        });
        document.getElementById('closeModal').onclick = function() {
            document.getElementById('blogModal').style.display = 'none';
        };
        document.getElementById('blogModal').onclick = function(e) {
            if(e.target === this) this.style.display = 'none';
        };
    });
    </script>

    <script>
        //上传头像跳转
        function Uploadface() {
            window.location.href = 'Uploadface';
        }
        //基本信息跳转
        function Person() {
            window.location.href = 'Person';
        }
        //修改资料跳转
        function ModifyData() {
            window.location.href = 'ModifyData';
        }
        //修改密码跳转
        function ChangePassword() {
            window.location.href = 'ChangePassword';
        }

        //首页跳转
        function HomePage() {
            var mainform = '@Url.Action("Index", "Default")';
            window.location.href = mainform;
        }
        //写文章跳转
        function Article() {
            window.location.href = 'Create';
        }

        // 左侧菜单交互
        document.querySelectorAll('.menu-item').forEach(item => {
            item.addEventListener('click', function () {
                // 移除所有激活状态
                document.querySelectorAll('.menu-item').forEach(i => i.classList.remove('active'));
                // 设置当前激活
                this.classList.add('active');
                // 这里可以添加内容切换逻辑
            });
        });

        // 博客选项卡交互
        document.querySelectorAll('.blog-tab').forEach(tab => {
            tab.addEventListener('click', function () {
                // 移除所有激活状态
                document.querySelectorAll('.blog-tab').forEach(t => t.classList.remove('active'));
                // 设置当前激活
                this.classList.add('active');

                // 根据选项卡切换内容
                if (this.textContent === '写文章') {
                    // 执行打开编辑器逻辑
                    console.log('打开文章编辑器');
                } else {
                    // 显示博客首页
                    console.log('显示博客列表');
                }
            });
        });

        // 管理按钮点击事件
        document.querySelector('.management-btn').addEventListener('click', () => {
            console.log('进入管理模式');
            // 这里可以添加管理功能逻辑
        });
    </script>
</body>
</html>
